<template>
  <div class="BRL" spinner="loading">
    <AppSkeleton :loading="props.loading">
      <template #ske>
        <div style="
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: start;
          ">
          <el-skeleton-item variant="text" style="width: 130px; height: 20px; margin-top: 10px" />
          <el-skeleton-item variant="text" style="
              width: 130px;
              height: 80px;
              margin-top: 10px;
              border-radius: 10px;
            " />
          <el-skeleton-item variant="text" style="width: 190px; height: 20px; margin-top: 10px" />
          <el-skeleton-item variant="text" style="width: 120px; height: 20px; margin-top: 10px" />
          <div style="
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: start;
              align-items: start;
              justify-content: space-between;
              flex-wrap: wrap;
            ">
            <el-skeleton-item variant="text" v-for="(item, index) in moneylist" :key="index" style="
                width: 22.4%;
                height: 72px;
                margin: 10px 0 0 0;
                border-radius: 10px;
              " />
          </div>
          <div style="
              width: 100%;
              display: flex;

              justify-content: start;
              align-items: center;
              margin-top: 10px;
            ">
            <el-skeleton-item variant="text" style="width: 40px; height: 45px; margin-right: 10px" />
            <el-skeleton-item variant="text" style="flex: 1; height: 45px; border-radius: 5px" />
          </div>
        </div>
      </template>
      <template #main>
        <h3>{{ $t("language.rechange.BRL.title") }}</h3>
        <div class="icon">
          <NuxtImg src="/img/pixi.png" alt="" />
          <strong>{{ $t("language.rechange.BRL.btnname") }}</strong>
        </div>
        <p>{{ $t("language.rechange.BRL.text1") }}</p>
        <h3>{{ $t("language.rechange.BRL.title2") }}</h3>
        <ol>
          <li v-for="item in moneyinfo.fixedAmounts.slice(1)" @click="money((item.amounts / 100).toString(), item.id)"
            :key="item.id">
            <div :class="rechange.productId == item.id ? 'activem' : ''">
              {{ item.amounts / 100 }} R$
            </div>
          </li>
        </ol>
        <div class="input">
          <span>{{ $t("language.rechange.BRL.money") }}$</span>
          <el-form :inline="true" :model="rechange" style="width: 100%;" class="demo-form-inline">
            <el-form-item prop="payAmount" :rules="[
      { required: true, message: $t('language.rechange.BRL.empty'), trigger: 'blur', },
      { validator: payAmountcheck, trigger: ['change', 'blur'], },
    ]" label="">
              <el-input style="width: 100%;height: 40px;" clearable v-model="rechange.payAmount"
                :placeholder="moneyinfo.minAmount / 100 + '~' + moneyinfo.maxAmount / 100" />
            </el-form-item>

          </el-form>

        </div>
      </template>
    </AppSkeleton>

    <footer>
      <AppSkeleton :loading="props.loading">
        <template #ske>
          <div style="
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: center;
            ">
            <el-skeleton-item variant="text" style="width: 100%; height: 44px" />
            <el-skeleton-item variant="text" style="width: 130px; height: 20px; margin-top: 10px" />
          </div>
        </template>
        <template #main>
          <el-button :disabled="rechange.payAmount == undefined || rechange.payAmount == ''" :loading="loading" de
            @click="rechangesubmit">{{
      $t("language.rechange.USDT.footbtn") }}</el-button>
          <p>
            <span>{{ $t("language.rechange.USDT.p1") }}</span>
            <strong @click="$openPage('/kefu')">{{ $t("language.rechange.USDT.p2") }}</strong>
            <span>{{ $t("language.rechange.USDT.p3") }}</span>
          </p>
        </template>
      </AppSkeleton>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref,shallowRef, reactive, nextTick, computed, watch } from "vue";
import { useI18n } from "vue-i18n";
const router = useRouter()
const { t } = useI18n();
const store = useStore()
const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
});
//获取充值数据
let moneyinfo: any = reactive({
  coinType: 0,
  fixedAmounts: [],
  maxAmount: 1000000,
  minAmount: 2000,
  payMode: 0,
})
//提现金额校验
let payAmountcheck = (rule: any, value: any, callback: any) => {
  // let str = /[0-9]*/
  rechange.payAmount = value.replace(/[^\d]/g, '');
  // if (!str.test(value)) return 
  console.log(moneyinfo.minAmount / 100, value, Number(value) < Number(moneyinfo.minAmount / 100));

  if (Number(value) < Number(moneyinfo.minAmount / 100)) {
    callback(new Error(t('language.rechange.BRL.minlimit') + ' ' + moneyinfo.minAmount / 100 + 'R$'))
  }
  if (Number(value) > Number(moneyinfo.maxAmount / 100)) {
    callback(new Error(t('language.rechange.BRL.maxlimit') + ' ' + moneyinfo.maxAmount / 100 + 'R$'))
  }
}

let info: any = computed((): { gameID: number } => store.userinfo);
let rechange = reactive({
  id: info.value.gameID,
  coinType: 0,
  payMode: 0,
  isFixed: true,
  productId: 0,
  payAmount: ""
});
watch(() => rechange.productId, (val) => val == 0 ? rechange.isFixed = false : rechange.isFixed = true, {
  immediate: true
})
let loading =shallowRef<boolean>(false);
let cointype = async () => {
  await nextTick()
  useHttpPOST(`/Payment/v1.0/User/Recharge/Protocol`, { id: info.value.gameID })
    .then(({ data }: { data: any }) => {
      console.log(data.value.data, 'kkkk');
      for (let key in data.value.data.list[0]) {
        moneyinfo[key] = data.value.data.list[0][key]
      }

    });
};
cointype()
//充值
let rechangesubmit = () => {
  loading.value = true;
  ElLoading.service({
    lock: true,
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'el-loading'
  })
  let time = setInterval(() => {
    console.log(rechange);
    let newewchange: any = JSON.parse(JSON.stringify(rechange))
    newewchange.payAmount = Number(rechange.payAmount) * 100
    useHttpPOST(`/Payment/v1.0/Web/User/Recharge`, newewchange)
      .then(({ data }: { data: any }) => {
        switch (data.value.code) {
          case 400:
            ElMessage({
              message: t("language.commontips.usernoexist"),
              type: "error",
              duration: 1000,
            });
            break;
          case 0:
            ElMessage({
              message: t("language.rechange.maxlimit"),
              duration: 1000,
              type: "success",
              onClose: () => {
                router.push({
                  path: "/informcao"
                })
                store.$patch({ orderinfo: data.value.data })
                // store.commit('SET_ORDERINFO', res.data.data)
                // localStorage.setItem('paymentinfo',JSON.stringify())
              }
            });
            break;
          case 0:
            ElMessage({
              message: t("language.commontips.rechangetips"),
              duration: 1000,
              type: "success",
              onClose: () => {
                router.push({
                  path: "/informcao"
                })
                store.$patch({ orderinfo: data.value.data })
                // localStorage.setItem('paymentinfo',JSON.stringify())
              }
            });
            break;
        }
      })
      .finally(() => {
        nextTick(() => {
          loading.value = false;
          clearInterval(time)
          ElLoading.service({
            lock: true,
            background: 'rgba(0, 0, 0, 0.7)',
            customClass: 'el-loading'
          }).close()
        });
      });
  }, 500)

};

let moneylist = reactive<{lang:string,price:string}[]>([
  {
    lang: "language.rechange.BRL.money",
    price: "10",
  },
  {
    lang: "language.rechange.BRL.money",
    price: "30",
  },
  {
    lang: "language.rechange.BRL.money",
    price: "50",
  },
  {
    lang: "language.rechange.BRL.money",
    price: "100",
  },
  {
    lang: "language.rechange.BRL.money",
    price: "300",
  },
  {
    lang: "language.rechange.BRL.money",
    price: "500",
  },
  {
    lang: "language.rechange.BRL.money",
    price: "1000",
  },
  {
    lang: "language.rechange.BRL.money",
    price: "2000",
  },
]);
let money = (val: string, id: number) => {
  rechange.payAmount = val.toString().replace(/[^\d]/g, '');
  rechange.productId = id
};
</script>

<style scoped lang="scss">
.loading {
  color: #0a906c;
  background-color: #0a906c;
}

.BRL {
  width: 100%;
  padding: 0 16px;

  h3 {
    font-size: 18px;
    color: #ffffff;
    margin: 10px 0;
  }

  .icon {
    width: 99px;
    height: 78px;
    border-radius: 10px;
    border: 2px solid #0a906c;
    background-color: rgb(71, 74, 81);

    img {
      width: 25px;
    }

    @include flex(column, center, center);

    strong {
      font-size: 14px;
      color: #ffffff;
      display: block;
      margin-top: 8px;
    }
  }

  p {
    font-size: 15px;
    color: #fff;
    margin: 10px 0 20px 0;
  }

  ol {
    @include flex(row, flex-start, flex-start);
    flex-wrap: wrap;

    li {
      margin: 0 0px 10px 0;
      width: 25%;
      cursor: pointer;

      div {
        width: 90%;
        height: 72px;
        @include flex(row, center, center);
        background-color: #32353e;
        border-radius: 10px;
        border: 2px solid #4a4c53;
        text-align: center;

        font-size: 14px;
        color: #b5bac8;
        font-weight: bold;
      }


    }



    .activem {
      border: 2px solid #0a906c;
      color: #fff;
    }
  }

  .input {
    height: 45px;
    @include flex(row, flex-start, center);
    margin-top: 5px;

    span {
      font-size: 18px;
      color: #fff;
      margin-right: 10px;
      font-weight: bold;
    }

    :deep(.el-form-item) {
      margin: 0;
    }

    :deep(.el-input__wrapper) {
      height: 40px !important;
      width: 100%;
      border-radius: 10px;
      background-color: rgb(39, 42, 48);
      box-shadow: none;
      border: 1px solid #4a4c53;
      color: #fff;
      font-weight: bold;
    }

    :deep(.el-form-item) {
      width: 100%;
    }

    :deep(.el-input__inner) {
      color: #fff;
      font-weight: bold;
    }
  }

  footer {
    position: fixed;
    width: calc(100vw - 30px);
    bottom: 10px;
    left: 15px;

    :deep(.el-button) {
      width: 100%;
      text-align: center;
      background-color: #0a906c;
      border-color: #0a906c;
      height: 44px;
      color: #fff;
      border-radius: 5px;
      font-size: 18px;
    }

    p {
      text-align: center;
      margin-top: 20px;

      span {
        font-size: 14px;
        color: #b5bac8;
      }

      strong {
        color: #fff;
        font-weight: normal;
      }
    }
  }
}
</style>
